<template>
  <div class="Nav">
    <el-card>
      <!-- 下层选项卡 -->
      <div class="downcard">
        <!-- logo -->

        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          router
          @select="handleSelect"
        >
          <!-- 图标 -->
          <el-image class="logoimg" fit="fill" :src="imgsrc"> </el-image>

          <!-- 一级分类-->
          <el-menu-item :index="'/'" style="margin-left: 3%">首页</el-menu-item>
          <el-menu-item index="/ShoppingCart">购物车</el-menu-item>
          <el-menu-item index="/OrderList">订单</el-menu-item>

          <!-- 输入框 -->
          <div class="inputdiv">
            <el-input
              class="inline-input"
              style="width: 320px"
              v-model="inputvalue"
              placeholder="请输入内容"
              :trigger-on-focus="false"
              @select="handleSelect"
            ></el-input>
            <!-- 搜索按钮 -->
            <el-button icon="el-icon-search" @click="gosearch()"></el-button>
          </div>

          <!-- 注册/登录/个人中心 -->
          <span class="usercenter" v-if="islogin" @click="usercenter()"
            >个人中心</span
          >
          <span
            class="loginbutton"
            type="primary"
            v-if="!islogin"
            @click="toLogin()"
            >登录</span
          >
          <!-- @click="usercenter()" -->
          <span class="registbutton" v-if="!islogin" @click="toRegister()"
            >注册</span
          >

          <!-- 个人中心右侧抽屉 -->
          <el-drawer
            v-model="drawer_visible"
            v-if="islogin"
            :with-header="false"
            size="300px"
          >
            <el-card class="header top-space-large">
              <!-- 头像 -->
              <div class="avatar">
                <el-avatar
                  shape="circle"
                  :size="100"
                  :src="userInfo.avatar"
                ></el-avatar>
              </div>

              <div class="avatarname">
                <span>{{ userInfo.username }}</span>
                <br />
                <span style="color: gray">账号</span>
              </div>
            </el-card>

            <!-- 功能菜单 -->
            <div class="main top-space-large">
              <el-menu
                :default-active="activeIndex"
                class="el-menu-vertical-demo"
                mode="vertical"
                router
              >
                <el-menu-item :index="'/usercenter'">个人资料</el-menu-item>
                <el-menu-item class="top-space-small" :index="'/userfavorite'"
                  >我的收藏</el-menu-item
                >
                <el-menu-item
                  class="top-space-small"
                  index="3"
                  @click="toBrowseHistory()"
                  >浏览历史</el-menu-item
                >
                <el-menu-item class="top-space-small" index="4" @click="clear()"
                  >注销</el-menu-item
                >
              </el-menu>
            </div>
          </el-drawer>
        </el-menu>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "/",
      state: "",
      user_visible: false,
      drawer_visible: false,
      userInfo: null,
      islogin: false,
      inputvalue: "",
      imgsrc: require("@/assets/logo.png"),
      selectvalue: "",
    };
  },
  methods: {
    usercenter() {
      this.drawer_visible = true;
    },
    autoLogin() {
      this.userInfo = this.$store.getters.getUser;
      if (this.userInfo == null) {
        return;
      }
      this.$store.commit("updateUser", this.userInfo);
      this.islogin = true;
      this.user_visible = false;
      this.$router.push("/");
    },
    toBrowseHistory() {
      this.$router.push("/BrowseHistory");
    },
    toLogin() {
      this.$router.push("/login");
    },
    toRegister() {
      this.$router.push("/register");
    },
    clear() {
      this.$store.commit("updateUser", null);
      localStorage.removeItem("user");
      this.islogin = false;
      this.drawer_visible = false;
      this.userInfo = null;
      this.$router.push("/");
    },
    checklogin() {
      let user = this.$store.getters.getUser;
      window.console.log(user);
      let date = new Date().getTime();
      if (user != null) {
        if (date - user.datetime > 3600000) {
          localStorage.removeItem("user");
          return;
        }
        this.autoLogin();
      }
    },

    gosearch() {
      let classify = this.inputvalue;
      if (classify != "") {
        this.$router.push({
          path: "search",
          query: {
            classify: classify,
          },
        });
      }
    },
  },
  mounted() {
    if (this.$store.getters.getUser == null) {
      this.$store.commit("updategetlocalUser");
    }
    this.checklogin();
  },
};
</script>

<style scoped>
.Nav {
  margin-bottom: 1%;
}
.Nav a {
  text-decoration: none;
}
.Nav >>> .el-card__body {
  padding: 0;
}
.upcard {
  height: 20px;
  padding-bottom: 10px;
  text-align: left;
  line-height: 25px;
  background-color: rgb(248, 248, 248);
}

.downcard span {
  cursor: pointer;
}
.downcard .usercenter {
  margin-left: 10%;
}

.downcard .loginbutton {
  margin-left: 16%;
}
.downcard .registbutton {
  margin-left: 3.5%;
}

.downcard .avatar {
  width: 30%;
  height: 100%;
  text-align: left;
  float: left;
  margin-left: 10%;
  line-height: 50px;
}

.downcard .avatarname {
  width: 60%;
  height: 100%;
  font-size: 18px;
  line-height: 55px;
  float: left;
  font-weight: bolder;
}

.downcard .header {
  background-image: url("../assets/cardstyle.jpg");
  text-align: center;
  background-size: cover;
  padding-top: 30px;
  padding-bottom: 20px;
}
.downcard .main {
  text-align: center;
  background-color: whitesmoke;
  height: 100%;
}

.downcard .main .el-menu .el-menu-item {
  margin-top: 0%;
  font-size: 16px;
  background-color: whitesmoke;
}

.downcard .bottom {
  text-align: center;
  margin-top: 40%;
}

.downcard .username {
  margin-top: 20px;
}

.downcard {
  text-align: left;
  margin: 0 auto;
  position: relative;
  height: 100px;
}

.downcard .el-menu .el-menu-item {
  margin-top: 3.8%;
  height: 56px;
  line-height: 56px;
}

.downcard .logoimg {
  float: left;
  width: 100px;
  height: 60px;
  margin-top: 3%;
  margin-left: 6%;
}

.downcard .inputdiv {
  margin-top: 2%;
  display: inline-block;
  line-height: 100px;
  margin-left: 12%;
}
.downcard .shoppingcart {
  display: inline-block;
  margin-left: 15%;
  line-height: 100px;
}
</style>